// import 'dart:async';
// import 'dart:convert';
//
// import 'package:flutter/material.dart';
// import 'package:http/http.dart' as http;
//
// Future<Album> fetchAlbum() async {
//   final response = await http
//       .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
//
//   if (response.statusCode == 200) {
//     // If the server did return a 200 OK response,
//     // then parse the JSON.
//     return Album.fromJson(jsonDecode(response.body));
//   } else {
//     // If the server did not return a 200 OK response,
//     // then throw an exception.
//     throw Exception('Failed to load album');
//   }
// }
//
// class Album {
//   final int userId;
//   final int id;
//   final String title;
//
//   Album({
//     required this.userId,
//     required this.id,
//     required this.title,
//   });
//
//   factory Album.fromJson(Map<String, dynamic> json) {
//     return Album(
//       userId: json['userId'],
//       id: json['id'],
//       title: json['title'],
//     );
//   }
// }
//
//void main() => runApp(const MyApp());
//
// class MyApp extends StatefulWidget {
//   const MyApp({Key? key}) : super(key: key);
//
//   @override
//   _MyAppState createState() => _MyAppState();
// }
//
// class _MyAppState extends State<MyApp> {
//   late Future<Album> futureAlbum;
//
//   @override
//   void initState() {
//     super.initState();
//     futureAlbum = fetchAlbum();
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       debugShowCheckedModeBanner: false,
//       title: 'Fetch Data Example',
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//       ),
//       home: Scaffold(
//         appBar: AppBar(
//           title: const Text('Fetch Data Example'),
//         ),
//         body: Center(
//           child: FutureBuilder<Album>(
//             future: futureAlbum,
//             builder: (context, snapshot) {
//               if (snapshot.hasData) {
//                 return Text(snapshot.data!.title);
//               } else if (snapshot.hasError) {
//                 return Text('${snapshot.error}');
//               }
//
//               // By default, show a loading spinner.
//               return const CircularProgressIndicator();
//             },
//           ),
//         ),
//       ),
//     );
//   }
// }



// void main() => runApp(
//       MaterialApp(
//         title: 'Passing Data',
//         home: TodosScreen(
//           todos: List.generate(
//             20,
//             (i) => Todo('Todo $i',
//                 'A description of what needs to be done for Todo $i'),
//           ),
//         ),
//       ),
//     );
//


// class Todo {
//   final String title;
//   final String description;
//
//   const Todo(this.title, this.description);
// }
//
// class TodosScreen extends StatelessWidget {
//   const TodosScreen({Key? key, required this.todos}) : super(key: key);
//
//   final List<Todo> todos;
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('Todos'),
//       ),
//       body: ListView.builder(
//         itemCount: todos.length,
//         itemBuilder: (context, index) {
//           return ListTile(
//             title: Text(todos[index].title),
//             // When a user taps the ListTile, navigate to the DetailScreen.
//             // Notice that you're not only creating a DetailScreen, you're
//             // also passing the current todo through to it.
//             onTap: () {
//               Navigator.push(
//                 context,
//                 MaterialPageRoute(
//                   builder: (context) => const DetailScreen(),
//                   settings: RouteSettings(
//                     arguments: todos[index],
//                   )
//                 ),
//               );
//             },
//           );
//         },
//       ),
//     );
//   }
// }
//
// class DetailScreen extends StatelessWidget {
//   // In the constructor, require a Todo.
//   const DetailScreen({Key? key}): super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//
//     final todo =ModalRoute.of(context)!.settings.arguments as Todo;
//
//     // Use the Todo to create the UI.
//     return Scaffold(
//       appBar: AppBar(
//         title: Text(todo.title),
//       ),
//       body: Padding(
//         padding: const EdgeInsets.all(16.0),
//         child: Text(todo.description),
//       ),
//     );
//   }
// }

// class RandomWords extends StatefulWidget{
//
//   @override
//   _RandomWordsState createState()=>_RandomWordsState();
// }
// class _RandomWordsState extends State<RandomWords>{
//
//   final _suggestions=<WordPair>[];
//   final _saved=<WordPair>{};
//   final _biggerFont =const TextStyle(fontSize: 18);
//
//   Widget _buildSuggestions(){
//     return ListView.builder(
//         padding: const EdgeInsets.all(16),
//         itemBuilder: (BuildContext _context,int i) {
//           if(i.isOdd){
//             return Divider();
//           }
//           final int index=i ~/2;
//           if (index >= _suggestions.length) {
//             _suggestions.addAll(generateWordPairs().take(10));
//           }
//           return _buildRow(_suggestions[index]);
//         }
//     );
//   }
//
//   Widget _buildRow(WordPair pair){
//     final alreadySaved=_saved.contains(pair);
//
//     return ListTile(
//       title: Text(
//         pair.asPascalCase,
//         style: _biggerFont,
//       ),
//       trailing: Icon(
//         alreadySaved?Icons.favorite:Icons.favorite_border,
//         color: alreadySaved?Colors.red:null,
//       ),
//       onTap: (){
//         setState(() {
//           if(alreadySaved){
//             _saved.remove(pair);
//           }else{
//             _saved.add(pair);
//           }
//         });
//       },
//     );
//
//   }
//
//   void _pushSaved() {
//     Navigator.of(context).push(
//       MaterialPageRoute<void>(
//         builder: (BuildContext context){
//           final tiles= _saved.map(
//             (WordPair pair){
//               return ListTile(
//                 title: Text(
//                   pair.asPascalCase,
//                   style: _biggerFont,
//                 ),
//               );
//             }
//           );
//           final divided =ListTile.divideTiles(
//               context:context,
//               tiles:tiles,
//           ).toList();
//           return Scaffold(
//             appBar: AppBar(
//               title: Text('Saved Suggestions'),
//             ),
//             body: ListView(children: divided),
//           );
//         },
//       ),
//     );
//   }
//
//   @override
//   Widget build(BuildContext context){
//
//     // final wordPair=WordPair.random();
//     // return Text(wordPair.asPascalCase);
//
//     return Scaffold(
//       appBar: AppBar(
//         title: Text('Startup Name Generator'),
//         actions: [IconButton(onPressed: _pushSaved, icon: Icon(Icons.list))],
//       ),
//       body: _buildSuggestions(),
//     );
//   }
// }
//
// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     final wordPair=WordPair.random();
//     return MaterialApp(
//       title: 'Welcome to Flutter',
//       home: RandomWords(),
//       theme: ThemeData(          // Add the 3 lines from here...
//         primaryColor: Colors.white,
//       ),
//       // home: Scaffold(
//       //   appBar: AppBar(
//       //     title: const Text('Welcome to Flutter'),
//       //   ),
//       //   body: Center(
//       //     //child: const Text('Hello World'),
//       //     //child: Text(wordPair.asLowerCase),
//       //     child: RandomWords(),
//       //   ),
//       // ),
//     );
//   }
// }

// class FavoriteWidget extends StatefulWidget {
//   const FavoriteWidget({Key? key}) : super(key: key);
//
//   @override
//   _FavoriteWidgetState createState() => _FavoriteWidgetState();
// }
//
// class _FavoriteWidgetState extends State<FavoriteWidget> {
//   bool _isFavorited = true;
//   int _favoriteCount = 41;
//
//   void _toggleFavorite() {
//     setState(() {
//       if (_isFavorited) {
//         _favoriteCount -= 1;
//         _isFavorited = false;
//       } else {
//         _favoriteCount += 1;
//         _isFavorited = true;
//       }
//     });
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       mainAxisSize: MainAxisSize.min,
//       children: [
//         Container(
//           padding: const EdgeInsets.all(0),
//           child: IconButton(
//             padding: const EdgeInsets.all(0),
//             alignment: Alignment.centerRight,
//             icon: (_isFavorited
//                 ? const Icon(Icons.star)
//                 : const Icon(Icons.star_border)),
//             color: Colors.red[500],
//             onPressed: _toggleFavorite,
//           ),
//         ),
//         SizedBox(
//           width: 18,
//           child: SizedBox(
//             child: Text('$_favoriteCount'),
//           ),
//         ),
//       ],
//     );
//   }
// }
//
// class MyApp extends StatelessWidget {
//   Widget titleSection = Container(
//     padding: const EdgeInsets.all(32),
//     child: Row(
//       children: [
//         Expanded(
//           /*1*/
//           child: Column(
//             crossAxisAlignment: CrossAxisAlignment.start,
//             children: [
//               /*2*/
//               Container(
//                 padding: const EdgeInsets.only(bottom: 8),
//                 child: const Text(
//                   'Oeschinen Lake Campground',
//                   style: TextStyle(
//                     fontWeight: FontWeight.bold,
//                   ),
//                 ),
//               ),
//               Text(
//                 'Kandersteg, Switzerland',
//                 style: TextStyle(
//                   color: Colors.grey[500],
//                 ),
//               ),
//             ],
//           ),
//         ),
//         /*3*/
//         const FavoriteWidget(),
//       ],
//     ),
//   );
//
//   @override
//   Widget build(BuildContext context) {
//     Color color = Theme.of(context).primaryColor;
//
//     Widget buttonSection = Row(
//       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//       children: [
//         _buildButtonColumn(color, Icons.call, 'CALL'),
//         _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
//         _buildButtonColumn(color, Icons.share, 'SHARE'),
//       ],
//     );
//
//     return MaterialApp(
//       title: 'Flutter layout demo',
//       home: Scaffold(
//         appBar: AppBar(
//           title: const Text('Flutter layout demo'),
//         ),
//         body: ListView(
//           children: [
//             Image.asset('images/lake.jpg',
//                 width: 600, height: 240, fit: BoxFit.cover),
//             titleSection,
//             buttonSection,
//             textSection
//           ],
//         ),
//       ),
//     );
//   }
//
//   Column _buildButtonColumn(Color color, IconData icon, String label) {
//     return Column(
//       mainAxisSize: MainAxisSize.min,
//       mainAxisAlignment: MainAxisAlignment.center,
//       children: [
//         Icon(icon, color: color),
//         Container(
//           margin: const EdgeInsets.only(top: 8),
//           child: Text(
//             label,
//             style: TextStyle(
//               fontSize: 12,
//               fontWeight: FontWeight.w400,
//               color: color,
//             ),
//           ),
//         ),
//       ],
//     );
//   }
//
//   Widget textSection = const Padding(
//     padding: EdgeInsets.all(32),
//     child: Text(
//       'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
//       'Alps. Situated 1,578 meters above sea level, it is one of the '
//       'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
//       'half-hour walk through pastures and pine forest, leads you to the '
//       'lake, which warms to 20 degrees Celsius in the summer. Activities '
//       'enjoyed here include rowing, and riding the summer toboggan run.',
//       softWrap: true,
//     ),
//   );
// }
//
// const red = Colors.red;
// const green = Colors.green;
// const blue = Colors.blue;
// const big = TextStyle(fontSize: 30);
//
//
// class HomePage extends StatelessWidget {
//   const HomePage({Key? key}) : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return const FlutterLayoutArticle([
//       Example1(),
//       Example2(),
//       Example3(),
//       Example4(),
//       Example5(),
//       Example6(),
//       Example7(),
//       Example8(),
//       Example9(),
//       Example10(),
//       Example11(),
//       Example12(),
//       Example13(),
//       Example14(),
//       Example15(),
//       Example16(),
//       Example17(),
//       Example18(),
//       Example19(),
//       Example20(),
//       Example21(),
//       Example22(),
//       Example23(),
//       Example24(),
//       Example25(),
//       Example26(),
//       Example27(),
//       Example28(),
//       Example29(),
//     ]);
//   }
// }
//
// abstract class Example extends StatelessWidget {
//   const Example({Key? key}) : super(key: key);
//
//   String get code;
//
//   String get explanation;
// }
//
// class FlutterLayoutArticle extends StatefulWidget {
//   const FlutterLayoutArticle(
//       this.examples, {
//         Key? key,
//       }) : super(key: key);
//
//   final List<Example> examples;
//
//   @override
//   _FlutterLayoutArticleState createState() => _FlutterLayoutArticleState();
// }
//
// class _FlutterLayoutArticleState extends State<FlutterLayoutArticle> {
//   late int count;
//   late Widget example;
//   late String code;
//   late String explanation;
//
//   @override
//   void initState() {
//     count = 1;
//     code = const Example1().code;
//     explanation = const Example1().explanation;
//
//     super.initState();
//   }
//
//   @override
//   void didUpdateWidget(FlutterLayoutArticle oldWidget) {
//     super.didUpdateWidget(oldWidget);
//     var example = widget.examples[count - 1];
//     code = example.code;
//     explanation = example.explanation;
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       debugShowCheckedModeBanner: false,
//       title: 'Flutter Layout Article',
//       home: SafeArea(
//         child: Material(
//           color: Colors.black,
//           child: FittedBox(
//             child: Container(
//               width: 400,
//               height: 670,
//               color: const Color(0xFFCCCCCC),
//               child: Column(
//                 crossAxisAlignment: CrossAxisAlignment.center,
//                 children: [
//                   Expanded(
//                       child: ConstrainedBox(
//                           constraints: const BoxConstraints.tightFor(
//                               width: double.infinity, height: double.infinity),
//                           child: widget.examples[count - 1])),
//                   Container(
//                     height: 50,
//                     width: double.infinity,
//                     color: Colors.black,
//                     child: SingleChildScrollView(
//                       scrollDirection: Axis.horizontal,
//                       child: Row(
//                         mainAxisSize: MainAxisSize.min,
//                         children: [
//                           for (int i = 0; i < widget.examples.length; i++)
//                             Container(
//                               width: 58,
//                               padding:
//                               const EdgeInsets.only(left: 4.0, right: 4.0),
//                               child: button(i + 1),
//                             ),
//                         ],
//                       ),
//                     ),
//                   ),
//                   Container(
//                     child: Scrollbar(
//                       child: SingleChildScrollView(
//                         key: ValueKey(count),
//                         child: Padding(
//                           padding: const EdgeInsets.all(10.0),
//                           child: Column(
//                             children: [
//                               Center(child: Text(code)),
//                               const SizedBox(height: 15),
//                               Text(
//                                 explanation,
//                                 style: TextStyle(
//                                     color: Colors.blue[900],
//                                     fontStyle: FontStyle.italic),
//                               ),
//                             ],
//                           ),
//                         ),
//                       ),
//                     ),
//                     height: 273,
//                     color: Colors.grey[50],
//                   ),
//                 ],
//               ),
//             ),
//           ),
//         ),
//       ),
//     );
//   }
//
//   Widget button(int exampleNumber) {
//     return Button(
//       key: ValueKey('button$exampleNumber'),
//       isSelected: count == exampleNumber,
//       exampleNumber: exampleNumber,
//       onPressed: () {
//         showExample(
//           exampleNumber,
//           widget.examples[exampleNumber - 1].code,
//           widget.examples[exampleNumber - 1].explanation,
//         );
//       },
//     );
//   }
//
//   void showExample(int exampleNumber, String code, String explanation) {
//     setState(() {
//       count = exampleNumber;
//       this.code = code;
//       this.explanation = explanation;
//     });
//   }
// }
//
// class Button extends StatelessWidget {
//   final bool isSelected;
//   final int exampleNumber;
//   final VoidCallback onPressed;
//
//   const Button({
//     required Key key,
//     required this.isSelected,
//     required this.exampleNumber,
//     required this.onPressed,
//   }) : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return TextButton(
//       style: TextButton.styleFrom(
//         primary: Colors.white,
//         backgroundColor: isSelected ? Colors.grey : Colors.grey[800],
//       ),
//       child: Text(exampleNumber.toString()),
//       onPressed: () {
//         Scrollable.ensureVisible(
//           context,
//           duration: const Duration(milliseconds: 350),
//           curve: Curves.easeOut,
//           alignment: 0.5,
//         );
//         onPressed();
//       },
//     );
//   }
// }
//
// class Example1 extends Example {
//   const Example1({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Container(color: red)';
//
//   @override
//   final explanation = 'The screen is the parent of the Container, '
//       'and it forces the Container to be exactly the same size as the screen.'
//       '\n\n'
//       'So the Container fills the screen and paints it red.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Container(color: red);
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example2 extends Example {
//   const Example2({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Container(width: 100, height: 100, color: red)';
//   @override
//   final String explanation =
//       'The red Container wants to be 100x100, but it can\'t, '
//       'because the screen forces it to be exactly the same size as the screen.'
//       '\n\n'
//       'So the Container fills the screen.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Container(width: 100, height: 100, color: red);
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example3 extends Example {
//   const Example3({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: Container(width: 100, height: 100, color: red))';
//   @override
//   final String explanation =
//       'The screen forces the Center to be exactly the same size as the screen,'
//       'so the Center fills the screen.'
//       '\n\n'
//       'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
//       'Now the Container can indeed be 100x100.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(width: 100, height: 100, color: red),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example4 extends Example {
//   const Example4({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Align(\n'
//       '   alignment: Alignment.bottomRight,\n'
//       '   child: Container(width: 100, height: 100, color: red))';
//   @override
//   final String explanation =
//       'This is different from the previous example in that it uses Align instead of Center.'
//       '\n\n'
//       'Align also tells the Container that it can be any size it wants, but if there is empty space it won\'t center the Container. '
//       'Instead, it aligns the Container to the bottom-right of the available space.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Align(
//       alignment: Alignment.bottomRight,
//       child: Container(width: 100, height: 100, color: red),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example5 extends Example {
//   const Example5({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: Container(\n'
//       '              color: red,\n'
//       '              width: double.infinity,\n'
//       '              height: double.infinity))';
//   @override
//   final String explanation =
//       'The screen forces the Center to be exactly the same size as the screen,'
//       'so the Center fills the screen.'
//       '\n\n'
//       'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
//       'The Container wants to be of infinite size, but since it can\'t be bigger than the screen, it just fills the screen.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(
//           width: double.infinity, height: double.infinity, color: red),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example6 extends Example {
//   const Example6({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(child: Container(color: red))';
//   @override
//   final String explanation =
//       'The screen forces the Center to be exactly the same size as the screen,'
//       'so the Center fills the screen.'
//       '\n\n'
//       'The Center tells the Container that it can be any size it wants, but not bigger than the screen.'
//       '\n\n'
//       'Since the Container has no child and no fixed size, it decides it wants to be as big as possible, so it fills the whole screen.'
//       '\n\n'
//       'But why does the Container decide that? '
//       'Simply because that\'s a design decision by those who created the Container widget. '
//       'It could have been created differently, and you have to read the Container documentation to understand how it behaves, depending on the circumstances. ';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(color: red),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example7 extends Example {
//   const Example7({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: Container(color: red\n'
//       '      child: Container(color: green, width: 30, height: 30)))';
//   @override
//   final String explanation =
//       'The screen forces the Center to be exactly the same size as the screen,'
//       'so the Center fills the screen.'
//       '\n\n'
//       'The Center tells the red Container that it can be any size it wants, but not bigger than the screen.'
//       'Since the red Container has no size but has a child, it decides it wants to be the same size as its child.'
//       '\n\n'
//       'The red Container tells its child that it can be any size it wants, but not bigger than the screen.'
//       '\n\n'
//       'The child is a green Container that wants to be 30x30.'
//       '\n\n'
//       'Since the red `Container` has no size but has a child, it decides it wants to be the same size as its child. '
//       'The red color isn\'t visible, since the green Container entirely covers all of the red Container.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(
//         color: red,
//         child: Container(color: green, width: 30, height: 30),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example8 extends Example {
//   const Example8({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: Container(color: red\n'
//       '      padding: const EdgeInsets.all(20.0),\n'
//       '      child: Container(color: green, width: 30, height: 30)))';
//   @override
//   final String explanation =
//       'The red Container sizes itself to its children size, but it takes its own padding into consideration. '
//       'So it is also 30x30 plus padding. '
//       'The red color is visible because of the padding, and the green Container has the same size as in the previous example.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: Container(
//         padding: const EdgeInsets.all(20.0),
//         color: red,
//         child: Container(color: green, width: 30, height: 30),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example9 extends Example {
//   const Example9({Key? key}) : super(key: key);
//
//   @override
//   final code = 'ConstrainedBox(\n'
//       '   constraints: BoxConstraints(\n'
//       '              minWidth: 70, minHeight: 70,\n'
//       '              maxWidth: 150, maxHeight: 150),\n'
//       '      child: Container(color: red, width: 10, height: 10)))';
//   @override
//   final String explanation =
//       'You might guess that the Container has to be between 70 and 150 pixels, but you would be wrong. '
//       'The ConstrainedBox only imposes ADDITIONAL constraints from those it receives from its parent.'
//       '\n\n'
//       'Here, the screen forces the ConstrainedBox to be exactly the same size as the screen, '
//       'so it tells its child Container to also assume the size of the screen, '
//       'thus ignoring its \'constraints\' parameter.';
//
//   @override
//   Widget build(BuildContext context) {
//     return ConstrainedBox(
//       constraints: const BoxConstraints(
//         minWidth: 70,
//         minHeight: 70,
//         maxWidth: 150,
//         maxHeight: 150,
//       ),
//       child: Container(color: red, width: 10, height: 10),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example10 extends Example {
//   const Example10({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: ConstrainedBox(\n'
//       '      constraints: BoxConstraints(\n'
//       '                 minWidth: 70, minHeight: 70,\n'
//       '                 maxWidth: 150, maxHeight: 150),\n'
//       '        child: Container(color: red, width: 10, height: 10))))';
//   @override
//   final String explanation =
//       'Now, Center allows ConstrainedBox to be any size up to the screen size.'
//       '\n\n'
//       'The ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child.'
//       '\n\n'
//       'The Container must be between 70 and 150 pixels. It wants to have 10 pixels, so it will end up having 70 (the MINIMUM).';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: ConstrainedBox(
//         constraints: const BoxConstraints(
//           minWidth: 70,
//           minHeight: 70,
//           maxWidth: 150,
//           maxHeight: 150,
//         ),
//         child: Container(color: red, width: 10, height: 10),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example11 extends Example {
//   const Example11({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: ConstrainedBox(\n'
//       '      constraints: BoxConstraints(\n'
//       '                 minWidth: 70, minHeight: 70,\n'
//       '                 maxWidth: 150, maxHeight: 150),\n'
//       '        child: Container(color: red, width: 1000, height: 1000))))';
//   @override
//   final String explanation =
//       'Center allows ConstrainedBox to be any size up to the screen size.'
//       'The ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child'
//       '\n\n'
//       'The Container must be between 70 and 150 pixels. It wants to have 1000 pixels, so it ends up having 150 (the MAXIMUM).';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: ConstrainedBox(
//         constraints: const BoxConstraints(
//           minWidth: 70,
//           minHeight: 70,
//           maxWidth: 150,
//           maxHeight: 150,
//         ),
//         child: Container(color: red, width: 1000, height: 1000),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example12 extends Example {
//   const Example12({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: ConstrainedBox(\n'
//       '      constraints: BoxConstraints(\n'
//       '                 minWidth: 70, minHeight: 70,\n'
//       '                 maxWidth: 150, maxHeight: 150),\n'
//       '        child: Container(color: red, width: 100, height: 100))))';
//   @override
//   final String explanation =
//       'Center allows ConstrainedBox to be any size up to the screen size.'
//       'ConstrainedBox imposes ADDITIONAL constraints from its \'constraints\' parameter onto its child.'
//       '\n\n'
//       'The Container must be between 70 and 150 pixels. It wants to have 100 pixels, and that\'s the size it has, since that\'s between 70 and 150.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Center(
//       child: ConstrainedBox(
//         constraints: const BoxConstraints(
//           minWidth: 70,
//           minHeight: 70,
//           maxWidth: 150,
//           maxHeight: 150,
//         ),
//         child: Container(color: red, width: 100, height: 100),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example13 extends Example {
//   const Example13({Key? key}) : super(key: key);
//
//   @override
//   final code = 'UnconstrainedBox(\n'
//       '   child: Container(color: red, width: 20, height: 50));';
//   @override
//   final String explanation =
//       'The screen forces the UnconstrainedBox to be exactly the same size as the screen.'
//       'However, the UnconstrainedBox lets its child Container be any size it wants.';
//
//   @override
//   Widget build(BuildContext context) {
//     return UnconstrainedBox(
//       child: Container(color: red, width: 20, height: 50),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example14 extends Example {
//   const Example14({Key? key}) : super(key: key);
//
//   @override
//   final code = 'UnconstrainedBox(\n'
//       '   child: Container(color: red, width: 4000, height: 50));';
//   @override
//   final String explanation =
//       'The screen forces the UnconstrainedBox to be exactly the same size as the screen, '
//       'and UnconstrainedBox lets its child Container be any size it wants.'
//       '\n\n'
//       'Unfortunately, in this case the Container has 4000 pixels of width and is too big to fit in the UnconstrainedBox, '
//       'so the UnconstrainedBox displays the much dreaded "overflow warning".';
//
//   @override
//   Widget build(BuildContext context) {
//     return UnconstrainedBox(
//       child: Container(color: red, width: 4000, height: 50),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example15 extends Example {
//   const Example15({Key? key}) : super(key: key);
//
//   @override
//   final code = 'OverflowBox(\n'
//       '   minWidth: 0.0,'
//       '   minHeight: 0.0,'
//       '   maxWidth: double.infinity,'
//       '   maxHeight: double.infinity,'
//       '   child: Container(color: red, width: 4000, height: 50));';
//   @override
//   final String explanation =
//       'The screen forces the OverflowBox to be exactly the same size as the screen, '
//       'and OverflowBox lets its child Container be any size it wants.'
//       '\n\n'
//       'OverflowBox is similar to UnconstrainedBox, and the difference is that it won\'t display any warnings if the child doesn\'t fit the space.'
//       '\n\n'
//       'In this case the Container is 4000 pixels wide, and is too big to fit in the OverflowBox, '
//       'but the OverflowBox simply shows as much as it can, with no warnings given.';
//
//   @override
//   Widget build(BuildContext context) {
//     return OverflowBox(
//       minWidth: 0.0,
//       minHeight: 0.0,
//       maxWidth: double.infinity,
//       maxHeight: double.infinity,
//       child: Container(color: red, width: 4000, height: 50),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example16 extends Example {
//   const Example16({Key? key}) : super(key: key);
//
//   @override
//   final code = 'UnconstrainedBox(\n'
//       '   child: Container(color: Colors.red, width: double.infinity, height: 100));';
//   @override
//   final String explanation =
//       'This won\'t render anything, and you\'ll see an error in the console.'
//       '\n\n'
//       'The UnconstrainedBox lets its child be any size it wants, '
//       'however its child is a Container with infinite size.'
//       '\n\n'
//       'Flutter can\'t render infinite sizes, so it throws an error with the following message: '
//       '"BoxConstraints forces an infinite width."';
//
//   @override
//   Widget build(BuildContext context) {
//     return UnconstrainedBox(
//       child: Container(color: Colors.red, width: double.infinity, height: 100),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example17 extends Example {
//   const Example17({Key? key}) : super(key: key);
//
//   @override
//   final code = 'UnconstrainedBox(\n'
//       '   child: LimitedBox(maxWidth: 100,\n'
//       '      child: Container(color: Colors.red,\n'
//       '                       width: double.infinity, height: 100));';
//   @override
//   final String explanation = 'Here you won\'t get an error anymore, '
//       'because when the LimitedBox is given an infinite size by the UnconstrainedBox, '
//       'it passes a maximum width of 100 down to its child.'
//       '\n\n'
//       'If you swap the UnconstrainedBox for a Center widget, '
//       'the LimitedBox won\'t apply its limit anymore (since its limit is only applied when it gets infinite constraints), '
//       'and the width of the Container is allowed to grow past 100.'
//       '\n\n'
//       'This explains the difference between a LimitedBox and a ConstrainedBox.';
//
//   @override
//   Widget build(BuildContext context) {
//     return UnconstrainedBox(
//       child: LimitedBox(
//         maxWidth: 100,
//         child: Container(
//           color: Colors.red,
//           width: double.infinity,
//           height: 100,
//         ),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example18 extends Example {
//   const Example18({Key? key}) : super(key: key);
//
//   @override
//   final code = 'FittedBox(\n'
//       '   child: Text(\'Some Example Text.\'));';
//   @override
//   final String explanation =
//       'The screen forces the FittedBox to be exactly the same size as the screen.'
//       'The Text has some natural width (also called its intrinsic width) that depends on the amount of text, its font size, and so on.'
//       '\n\n'
//       'The FittedBox lets the Text be any size it wants, '
//       'but after the Text tells its size to the FittedBox, '
//       'the FittedBox scales the Text until it fills all of the available width.';
//
//   @override
//   Widget build(BuildContext context) {
//     return const FittedBox(
//       child: Text('Some Example Text.'),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example19 extends Example {
//   const Example19({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: FittedBox(\n'
//       '      child: Text(\'Some Example Text.\')));';
//   @override
//   final String explanation =
//       'But what happens if you put the FittedBox inside of a Center widget? '
//       'The Center lets the FittedBox be any size it wants, up to the screen size.'
//       '\n\n'
//       'The FittedBox then sizes itself to the Text, and lets the Text be any size it wants.'
//       '\n\n'
//       'Since both FittedBox and the Text have the same size, no scaling happens.';
//
//   @override
//   Widget build(BuildContext context) {
//     return const Center(
//       child: FittedBox(
//         child: Text('Some Example Text.'),
//       ),
//     );
//   }
// }
//
// ////////////////////////////////////////////////////
//
// class Example20 extends Example {
//   const Example20({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: FittedBox(\n'
//       '      child: Text(\'…\')));';
//   @override
//   final String explanation =
//       'However, what happens if FittedBox is inside of a Center widget, but the Text is too large to fit the screen?'
//       '\n\n'
//       'FittedBox tries to size itself to the Text, but it can\'t be bigger than the screen. '
//       'It then assumes the screen size, and resizes Text so that it fits the screen, too.';
//
//   @override
//   Widget build(BuildContext context) {
//     return const Center(
//       child: FittedBox(
//         child: Text(
//             'This is some very very very large text that is too big to fit a regular screen in a single line.'),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example21 extends Example {
//   const Example21({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Center(\n'
//       '   child: Text(\'…\'));';
//   @override
//   final String explanation = 'If, however, you remove the FittedBox, '
//       'the Text gets its maximum width from the screen, '
//       'and breaks the line so that it fits the screen.';
//
//   @override
//   Widget build(BuildContext context) {
//     return const Center(
//       child: Text(
//           'This is some very very very large text that is too big to fit a regular screen in a single line.'),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example22 extends Example {
//   const Example22({Key? key}) : super(key: key);
//
//   @override
//   final code = 'FittedBox(\n'
//       '   child: Container(\n'
//       '      height: 20.0, width: double.infinity));';
//   @override
//   final String explanation =
//       'FittedBox can only scale a widget that is BOUNDED (has non-infinite width and height).'
//       'Otherwise, it won\'t render anything, and you\'ll see an error in the console.';
//
//   @override
//   Widget build(BuildContext context) {
//     return FittedBox(
//       child: Container(
//         height: 20.0,
//         width: double.infinity,
//         color: Colors.red,
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example23 extends Example {
//   const Example23({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Row(children:[\n'
//       '   Container(color: red, child: Text(\'Hello!\'))\n'
//       '   Container(color: green, child: Text(\'Goodbye!\'))]';
//   @override
//   final String explanation =
//       'The screen forces the Row to be exactly the same size as the screen.'
//       '\n\n'
//       'Just like an UnconstrainedBox, the Row won\'t impose any constraints onto its children, '
//       'and instead lets them be any size they want.'
//       '\n\n'
//       'The Row then puts them side-by-side, and any extra space remains empty.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Container(color: red, child: const Text('Hello!', style: big)),
//         Container(color: green, child: const Text('Goodbye!', style: big)),
//       ],
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example24 extends Example {
//   const Example24({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Row(children:[\n'
//       '   Container(color: red, child: Text(\'…\'))\n'
//       '   Container(color: green, child: Text(\'Goodbye!\'))]';
//   @override
//   final String explanation =
//       'Since the Row won\'t impose any constraints onto its children, '
//       'it\'s quite possible that the children might be too big to fit the available width of the Row.'
//       'In this case, just like an UnconstrainedBox, the Row displays the "overflow warning".';
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Container(
//           color: red,
//           child: const Text(
//             'This is a very long text that '
//                 'won\'t fit the line.',
//             style: big,
//           ),
//         ),
//         Container(color: green, child: const Text('Goodbye!', style: big)),
//       ],
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example25 extends Example {
//   const Example25({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Row(children:[\n'
//       '   Expanded(\n'
//       '       child: Container(color: red, child: Text(\'…\')))\n'
//       '   Container(color: green, child: Text(\'Goodbye!\'))]';
//   @override
//   final String explanation =
//       'When a Row\'s child is wrapped in an Expanded widget, the Row won\'t let this child define its own width anymore.'
//       '\n\n'
//       'Instead, it defines the Expanded width according to the other children, and only then the Expanded widget forces the original child to have the Expanded\'s width.'
//       '\n\n'
//       'In other words, once you use Expanded, the original child\'s width becomes irrelevant, and is ignored.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Expanded(
//           child: Center(
//             child: Container(
//               color: red,
//               child: const Text(
//                 'This is a very long text that won\'t fit the line.',
//                 style: big,
//               ),
//             ),
//           ),
//         ),
//         Container(color: green, child: const Text('Goodbye!', style: big)),
//       ],
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example26 extends Example {
//   const Example26({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Row(children:[\n'
//       '   Expanded(\n'
//       '       child: Container(color: red, child: Text(\'…\')))\n'
//       '   Expanded(\n'
//       '       child: Container(color: green, child: Text(\'Goodbye!\'))]';
//   @override
//   final String explanation =
//       'If all of Row\'s children are wrapped in Expanded widgets, each Expanded has a size proportional to its flex parameter, '
//       'and only then each Expanded widget forces its child to have the Expanded\'s width.'
//       '\n\n'
//       'In other words, Expanded ignores the preffered width of its children.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Expanded(
//           child: Container(
//             color: red,
//             child: const Text(
//               'This is a very long text that won\'t fit the line.',
//               style: big,
//             ),
//           ),
//         ),
//         Expanded(
//           child: Container(
//             color: green,
//             child: const Text(
//               'Goodbye!',
//               style: big,
//             ),
//           ),
//         ),
//       ],
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example27 extends Example {
//   const Example27({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Row(children:[\n'
//       '   Flexible(\n'
//       '       child: Container(color: red, child: Text(\'…\')))\n'
//       '   Flexible(\n'
//       '       child: Container(color: green, child: Text(\'Goodbye!\'))]';
//   @override
//   final String explanation =
//       'The only difference if you use Flexible instead of Expanded, '
//       'is that Flexible lets its child be SMALLER than the Flexible width, '
//       'while Expanded forces its child to have the same width of the Expanded.'
//       '\n\n'
//       'But both Expanded and Flexible ignore their children\'s width when sizing themselves.'
//       '\n\n'
//       'This means that it\'s IMPOSSIBLE to expand Row children proportionally to their sizes. '
//       'The Row either uses the exact child\'s width, or ignores it completely when you use Expanded or Flexible.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Flexible(
//           child: Container(
//             color: red,
//             child: const Text(
//               'This is a very long text that won\'t fit the line.',
//               style: big,
//             ),
//           ),
//         ),
//         Flexible(
//           child: Container(
//             color: green,
//             child: const Text(
//               'Goodbye!',
//               style: big,
//             ),
//           ),
//         ),
//       ],
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example28 extends Example {
//   const Example28({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Scaffold(\n'
//       '   body: Container(color: blue,\n'
//       '   child: Column(\n'
//       '      children: [\n'
//       '         Text(\'Hello!\'),\n'
//       '         Text(\'Goodbye!\')])))';
//
//   @override
//   final String explanation =
//       'The screen forces the Scaffold to be exactly the same size as the screen,'
//       'so the Scaffold fills the screen.'
//       '\n\n'
//       'The Scaffold tells the Container that it can be any size it wants, but not bigger than the screen.'
//       '\n\n'
//       'When a widget tells its child that it can be smaller than a certain size, '
//       'we say the widget supplies "loose" constraints to its child. More on that later.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       body: Container(
//         color: blue,
//         child: Column(
//           children: const [
//             Text('Hello!'),
//             Text('Goodbye!'),
//           ],
//         ),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////
//
// class Example29 extends Example {
//   const Example29({Key? key}) : super(key: key);
//
//   @override
//   final code = 'Scaffold(\n'
//       '   body: Container(color: blue,\n'
//       '   child: SizedBox.expand(\n'
//       '      child: Column(\n'
//       '         children: [\n'
//       '            Text(\'Hello!\'),\n'
//       '            Text(\'Goodbye!\')]))))';
//
//   @override
//   final String explanation =
//       'If you want the Scaffold\'s child to be exactly the same size as the Scaffold itself, '
//       'you can wrap its child with SizedBox.expand.'
//       '\n\n'
//       'When a widget tells its child that it must be of a certain size, '
//       'we say the widget supplies "tight" constraints to its child. More on that later.';
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       body: SizedBox.expand(
//         child: Container(
//           color: blue,
//           child: Column(
//             children: const [
//               Text('Hello!'),
//               Text('Goodbye!'),
//             ],
//           ),
//         ),
//       ),
//     );
//   }
// }
//
// //////////////////////////////////////////////////

// class HomeScreen extends StatelessWidget {
//   const HomeScreen({Key? key}) : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('Returning Data Demo'),
//       ),
//       // Create the SelectionButton widget in the next step.
//       body: const Center(
//         child: SelectionButton(),
//       ),
//     );
//   }
// }
//
// class SelectionButton extends StatelessWidget {
//   const SelectionButton({Key? key}) : super(key: key);
//
//   void _navigateAndDisplaySelection(BuildContext context) async {
//     // Navigator.push returns a Future that completes after calling
//     // Navigator.pop on the Selection Screen.
//     final result = await Navigator.push(
//       context,
//       MaterialPageRoute(builder: (context) => const SelectionScreen()),
//     );
//
//     // After the Selection Screen returns a result, hide any previous snackbars
//     // and show the new result.
//     // 等选择界面返回结果，先隐藏之前的 snackbars，结果显示在新的 snackbars 里  (After the Selection Screen returns a result, hide any previous snackbars and show the new result!)
//     ScaffoldMessenger.of(context)
//       ..removeCurrentSnackBar()
//       ..showSnackBar(SnackBar(content: Text('$result')));
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () {
//         _navigateAndDisplaySelection(context);
//       },
//       child: const Text('Pick an option, any option!'),
//     );
//   }
//
// }
//
// class SelectionScreen extends StatelessWidget {
//   const SelectionScreen({Key? key}) : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('Pick an option'),
//       ),
//       body: Center(
//         child: Column(
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: [
//             Padding(
//               padding: const EdgeInsets.all(8.0),
//               child: ElevatedButton(
//                 onPressed: () {
//                   // 在这里返回 "Yep" (Pop here with "Yep"...)
//                   Navigator.pop(context, 'Yep!');
//                 },
//                 child: const Text('Yep!'),
//               ),
//             ),
//             Padding(
//               padding: const EdgeInsets.all(8.0),
//               child: ElevatedButton(
//                 onPressed: () {
//                   // Pop here with "Nope"...
//                   Navigator.pop(context, 'Nope.');
//                 },
//                 child: const Text('Nope.'),
//               ),
//             )
//           ],
//         ),
//       ),
//     );
//   }
// }
